<template>
  <div class="page">
    <!-- 顶部栏 -->
    <Base-Navbar title="生态"></Base-Navbar>

    <div class="container">
      <!-- 搜索栏 -->
      <div class="mb-10">
        <van-search
          placeholder="请输入你需要访问的生态币种"
          :clearable="false"
          @search="getEcologyList"
          v-model="keyword"
        ></van-search>
      </div>

      <!-- 生态列表 -->
      <div class="box opacity">
        <ul class="list">
          <li class="item" v-for="(v, i) in ecologys" :key="i">
            <ecology-item :v="v"></ecology-item>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from 'js/api'

import ecologyItem from './components/ecology_item.vue'

const keyword = ref('')
const ecologys = ref([])

getEcologyList()

// 获取生态列表
async function getEcologyList() {
  const params = {
    keyword: keyword.value,
  }

  const { code, data } = await api.getEcologyList(params)

  if (code === 1) {
    ecologys.value = data
  }
}
</script>

<style lang="scss" scoped></style>
